<template>
  <div class="dashboard-page">
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6">
        <el-card>
          <div class="card-title">用户总数</div>
          <div class="card-value">{{ stats.users }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">活跃用户</div>
          <div class="card-value">{{ stats.activeUsers }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">今日访问量</div>
          <div class="card-value">{{ stats.todayVisits }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">系统消息</div>
          <div class="card-value">{{ stats.messages }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="16">
        <el-card>
          <div class="chart-title">一周访问趋势</div>
          <ul class="fake-chart">
            <li v-for="(item, idx) in weekVisits" :key="idx">
              <span>{{ item.day }}：</span>
              <span>{{ item.count }} 次访问</span>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="chart-title">用户角色分布</div>
          <ul class="fake-pie">
            <li>
              <span class="role-label">管理员：</span>
              <span class="role-value">{{ roleStats.admin }} 人</span>
            </li>
            <li>
              <span class="role-label">普通用户：</span>
              <span class="role-value">{{ roleStats.user }} 人</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref({
  users: 1200,
  activeUsers: 320,
  todayVisits: 560,
  messages: 8
})

const weekVisits = ref([
  { day: '周一', count: 120 },
  { day: '周二', count: 200 },
  { day: '周三', count: 150 },
  { day: '周四', count: 80 },
  { day: '周五', count: 70 },
  { day: '周六', count: 110 },
  { day: '周日', count: 130 }
])

const roleStats = ref({
  admin: 300,
  user: 900
})
</script>

<style scoped>
.dashboard-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}
.dashboard-cards {
  margin-bottom: 24px;
}
.card-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 8px;
}
.card-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.fake-chart, .fake-pie {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fake-chart li, .fake-pie li {
  padding: 6px 0;
  font-size: 15px;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.role-label {
  color: #888;
}
.role-value {
  color: #409EFF;
  font-weight: bold;
}
</style>
